<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/quesManage'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/quesManage'}">问卷列表</el-breadcrumb-item>
            <el-breadcrumb-item>新增问卷</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="hello" style="margin-top: 20px">
            <el-form ref="modelForm" :rule="rules" :model="modelForm" label-position="right">
                <div style="margin-top: 20px">
                    <el-form-item prop="title" :rules="{ required: true, message: '请填写问卷标题', trigger: 'change' }">
                        问卷标题：
                        <el-input
                                type="text"
                                placeholder="输入标题"
                                v-model="modelForm.title"
                                style="max-width: 250px;"/>

                    </el-form-item>
                    <el-divider/>
                    <el-form-item prop="descri" :rules="{ required: true, message: '请填写问卷说明', trigger: 'change' }">
                        <span>问卷说明：</span>
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                placeholder="请填写问卷说明"
                                v-model="modelForm.descri"
                                style="width: 800px; padding-right: 100px">
                        </el-input>
                    </el-form-item>
                    <el-divider/>
                </div>
                <vuedraggable v-model="modelForm.questions" class="wrapper" @end="end">
                    <div v-for="(item, index) in modelForm.questions" :key="index">
                        <el-collapse>
                            <el-collapse-item>
                                <template slot="title">
                                    第{{ index+1 }}题
                                    {{ item.questionType === 1 ? '(单选)' : item.questionType === 2 ? '(多选)' : item.questionType === 3 ? '(简答)' : ''}}，
                                    题目：{{ item.questionTitle }}
                                </template>

                                <!-- 问题 -->
                                <el-form-item
                                        name="questionNo"
                                        value="index"
                                        :prop="`questions.${index}.questionType`"
                                        :label="`问题${index + 1}类型`"
                                        :rules="{ required: true, message: '请选择问题类型', trigger: 'change' }"
                                >
                                    <el-radio-group v-model="item.questionType">
                                        <el-radio :label="1">单选题</el-radio>
                                        <el-radio :label="2">多选题</el-radio>
                                        <el-radio :label="3">填空题</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!--问题-->
                                <el-form-item
                                        :prop="`questions.${index}.questionTitle`"
                                        label="问题"
                                        :rules="{ required: true, message: '请填写问题', trigger: 'change' }"
                                >
                                    <el-input v-model.trim="item.questionTitle" style="width:258px" clearable
                                              placeholder="请填写问题"/>

                                </el-form-item>
                                <el-form-item>
                                    <el-input v-model.trim="item.questionNo=index+1" v-show="false"/>
                                </el-form-item>
                                <!-- 答案 -->
                                <el-form-item
                                        v-for="(opt, idx) in item.questionOption"
                                        v-show="item.questionType!=3"
                                        :key="idx"
                                        :label="`选项${idx + 1}`"
                                        :prop="`questions.${index}.questionOption.${idx}.value`"
                                        >
                                    <el-input v-model.trim="opt.value" style="width:258px" clearable
                                              placeholder="请输入答案"/>
                                    <el-button style="margin-left: 20px" @click.prevent="removeDomain(index,idx)">删除
                                    </el-button>
                                </el-form-item>
                                <el-form-item>
                                    <el-button v-show="item.questionType!=3" @click="addDomain(index)">新增选项</el-button>
                                    <el-button @click="removeQuestion(index)">删除题目</el-button>
                                </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </vuedraggable>
                <el-divider/>
                <el-form-item>
                    <div style="height: 50px; text-align: left; line-height: 50px">
                        <el-radio v-model="timeRadio" label="1" @change="toggleDatepicker(false)">手动结束收集</el-radio>
                        <el-divider direction="vertical"/>
                        <el-radio v-model="timeRadio" label="2" @change="toggleDatepicker(true)">开始时间-结束时间</el-radio>
                    </div>
                    <el-form-item prop="date">
                        <el-date-picker
                                v-model="modelForm.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                v-if="datepicker"
                                @change="changeDate()"
                                :rules="[{required: true, message: '请输入日期', trigger: 'change' }]">
                        </el-date-picker>
                    </el-form-item>


                    <el-divider/>
                    <el-form-item style="margin-right: 50px;float: right">
                        <el-button @click="addQuestion" type="primary">新增题目</el-button>
                        <el-button style="margin-top: 10px" @click="addSubmit()" type="primary">提交</el-button>
                        <el-button @click="resetForm('modelForm')" type="info">重置</el-button>
                    </el-form-item>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
<script>
    import vuedraggable from 'vuedraggable';
    import {addPaper} from "../../../api/paperMG";

    export default {
        name: 'HelloWorld',
        components: {
            vuedraggable
        },
        data() {
            return {
                rules: {},
                modelForm: {
                    title: '',
                    descri: '',
                    questions: [{
                        questionNo:'',
                        questionType: '',
                        questionTitle: '',
                        questionOption: []
                    }, {
                        questionNo:'',
                        questionType: '',
                        questionTitle: '',
                        questionOption: []
                    }, {
                        questionNo:'',
                        questionType: '',
                        questionTitle: '',
                        questionOption: []
                    }],
                    date: [],
                    endTime: '',
                    startTime: ''
                },
                datepicker: false,

                timeRadio: ''
            }
        },
        methods: {
            end(evt) {
                this.$refs.modelForm.clearValidate()
            },
            removeDomain(index, idx) { // 删除选项
                this.modelForm.questions[index].questionOption.splice(idx, 1)
            },
            removeQuestion(index) {//删除题目
                this.modelForm.questions.splice(index, 1)
            },
            addDomain(index) { // 新增选项
                this.modelForm.questions[index].questionOption.push({value: ''})
            },
            addQuestion() { // 新增题目
                this.modelForm.questions.push({questionType: '', questionTitle: '', questionOption: [{value: ''}]})
            },
            resetForm(formName) { // 重置
                console.log("modelForm重置前==>", this.modelForm);
                this.$refs[formName].resetFields();
                console.log("modelForm重置==>", this.modelForm);
            },
            addSubmit() {

                console.log("<====this.modelForm====>", this.modelForm);

                this.$refs.modelForm.validate(valid => {
                    if (valid) {
                        console.log("<====this.modelForm====>", this.modelForm);
                        console.log(this.modelForm.questions);
                        addPaper(this.modelForm).then(res => {
                            console.log("================");
                            console.log(res);
                            if (res.code === 200) {
                                this.$router.push({name:"QuesManage"});
                                this.$message.success("新增问卷成功！")
                            }
                        })
                    }
                })
            },
            changeDate() {
                console.log("this.date=>", this.modelForm.date);
                const transfer = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 00:00:00`;
                let startTime = transfer(this.modelForm.date[0]);
                this.modelForm.startTime = startTime;
                console.log("startTime=>", startTime);
                let endTime = transfer(this.modelForm.date[1]);
                this.modelForm.endTime = endTime;
                const newPaperInfo = {
                    ...this.paperInfo,
                    startTime,
                    endTime
                };
                console.log(newPaperInfo);
                // this.updatePaperInfo(newPaperInfo).then((res) => {
                //     if (!res) {
                //         this.$message.error('网路异常')
                //     }
                // })
            },
            toggleDatepicker(bool) {
                this.datepicker = bool;
                if (!bool) {
                    this.date = null;
                    const newPaperInfo = {
                        ...this.paperInfo,
                        startTime: null,
                        endTime: null
                    };
                    console.log(newPaperInfo)
                    // this.updatePaperInfo(newPaperInfo).then((res) => {
                    //     if (!res) {
                    //         this.$message.error('网路异常')
                    //     }
                    // })
                }
            },
        }
    }
</script>

<style scoped>

</style>
